import React, { useState } from 'react';
import { Steps, Row, Col } from 'antd';
import Step1 from './step1';
import Step2 from './step2';
import './index.less'

const { Step } = Steps;

export default function(props) {
  const [current, setCurrent] = useState(0);
  const [count, setCount] = useState(0);
  const [params, setParams] = useState({
    between_start_data_time: undefined,
    between_end_data_time: undefined,
    app_id: undefined,
    product_id: undefined,
    event_id: undefined,
  });
  const [selectRowKeys, setSelectRowKeys] = useState([])
  const [pageParams, setPageParams] = useState({
    current_page: 1,
    page_size: 10,
  })

  const steps = [
    {
      title: '筛选数据'
    },
    {
      title: '下载完成'
    },
  ];

  const goToNext = (count, params, selectRowKeys, pageParams) => {
    setCount(count)
    setCurrent(current => current + 1)
    setParams(params)
    setSelectRowKeys(selectRowKeys)
    setPageParams(pageParams)
  }

  const goToLast = () => {
    setCurrent(current => current - 1)
  }

  return (
    <div className='event-download-wp'>
      <div className='event-download-hd'>
        <Row type='flex' justify='center'>
          <Col span={12}>
            <Steps current={current}>
              {steps.map(item => (
                <Step key={item.title} title={item.title} />
              ))}
            </Steps>
          </Col>
        </Row>
      </div>
      {current === 0 && (
        <>
          <Step1 goToNext={goToNext} params={params} selectRowKeys={selectRowKeys} pageParams={pageParams} />
        </>
      )}
      {current === 1 && <Step2 goToLast={goToLast} count={count}></Step2>}
    </div>
  );
}
